<template>
  <view class="container">
    <view class="header">
      <image class="car-image" :src="carDetail.carImage"></image>
      <view class="car-info">
        <view class="car-brand">{{carDetail.carBrand}}</view>
        <view class="car-title">{{carDetail.carET}} | {{carDetail.carSeat}}座 | {{carDetail.carPN}}</view>
      </view>
    </view>
    <view class="content">

      <view>订单编号: {{orderDetail.orderID}}</view>
      <view>汽车编号: {{carDetail.carID}}</view>
      <view>下单用户: {{orderDetail.orderUserName}}</view>
      <view>下单地址: {{orderDetail.orderPoint}}</view>
      <view>订单状态: {{orderDetail.isPay}}</view>
      <view>订单日期: {{orderDetail.orderDate}}</view>
      <view>订单总价: ￥{{orderDetail.price}}</view>
      <view>租车时间: {{days}}天</view>
      <view>支付方式: 在线支付</view>
      <button v-if="isBusiness" @click="refund">帮助用户退单</button>

    </view>
  </view>
</template>

<script>
  import store from '../../store/index.js' //需要引入store
  export default {
    data() {
      return {
        days: '',
        carDetail: {
          carImage: '',
          carBrand: '',
          carSeat: '',
          carET: '', // 能源类型
          carPN: '', // 车牌号
          carID: store.state.orders.Order_Car,
        },
        orderDetail: {
          price: store.state.orders.Goods_Price,
          isPay: store.state.orders.Order_Pay,
          orderID: store.state.orders.Order_ID,
          orderDate: store.state.orders.Order_Date,
          orderPoint: '', // 下单地址
          orderUserName: '',
        },
        isBusiness: Boolean(store.state.business.B_Name !== undefined)
      }
    },
    onLoad() {
      // 改变时间格式
      this.getBeiJingTime()
      this.getCarDetail()
      this.getOrderDetail()
      this.days = store.state.days
    },
    methods: {
      //根据ID获取汽车信息
      getCarDetail() {
        uni.request({
          url: 'http://127.0.0.1:3007/api/getCarById',
          method: 'POST',
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
          data: { id: store.state.orders.Order_Car },
          success: res => {
            console.log('getcardetailres:', res)
            console.log('id:', store.state.orders.Order_Car)
            this.carDetail.carImage = res.data.data.C_Image
            this.carDetail.carBrand = res.data.data.C_Brand
            this.carDetail.carSeat = res.data.data.C_Seat
            this.carDetail.carET = res.data.data.C_ET
            this.carDetail.carPN = res.data.data.C_PN

          },
          fail: error => {
            console.error(error)
            uni.showToast({ title: '网络请求失败' })
          }
        })
      },
      // 根据ID获取订单信息
      getOrderDetail() {
        uni.request({
          url: 'http://127.0.0.1:3007/api/detailOrderById',
          method: 'POST',
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
          data: { id: store.state.orders.Order_ID },
          success: res => {

            this.orderDetail.orderUserName = res.data.data[0].Order_UserName
            this.orderDetail.orderPoint = res.data.data[0].Order_Point
            console.log('获取订单信息成功:', res)
          },
          fail: error => {
            console.error(error)
            uni.showToast({ title: '网络请求失败' })
          }
        })
      },
      // 改变时间格式
      getBeiJingTime() {
        // ISO 8601格式的日期和时间
        var iso8601Datetime = this.orderDetail.orderDate
        // 将ISO 8601格式转换为Date对象
        var dt = new Date(iso8601Datetime)
        // 进行时区调整
        var beijingTimezoneOffset = 8 * 60 // 北京时间为UTC+8
        var beijingTimestamp = dt.getTime() + beijingTimezoneOffset * 60 * 1000
        var beijingDatetime = new Date(beijingTimestamp)
        // 格式化为指定格式的字符串，并去除毫秒部分
        var beijingDatetimeStr = beijingDatetime.toISOString().replace('T', ' ').replace('Z', '').substring(0, 19)
        this.orderDetail.orderDate = beijingDatetimeStr
      },
      // 帮用户退单
      refund() {
        uni.showModal({
          title: '提示',
          content: '是否为用户"' + this.orderDetail.orderUserName + '"退单',
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定')
              uni.request({
                url: 'http://127.0.0.1:3007/api/refund',
                method: 'POST',
                header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
                data: {
                  orderCar: store.state.orders.Order_Car,
                  orderId: store.state.orders.Order_ID,
                },
                success: res => {
                  uni.showToast({
                    title: res.data.message,
                    icon: 'none'
                  })
                  console.log('网络请求成功:', res)
                },
                fail: error => {
                  console.error(error)
                  uni.showToast({ title: '网络请求失败' })
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })


      }
    }
  }
</script>

<style>
  .container {
    /* margin-top: 20%;
		padding: 20px;
		border: red 1px solid; */
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    flex-direction: column;
    /* 垂直布局 */
    padding: 20px;
    height: 100vh;
    /* 设置容器高度为视口高度 */
    box-sizing: border-box;
    /* 包含内边距在内 */
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .car-image {
    border-radius: 5%;
    width: 150px;
    height: 100px;
  }

  .car-info {
    flex: 1;
    margin-left: 10px;
  }

  .car-brand {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .car-title {
    font-size: 12px;
    color: #999;
    margin-top: 10px;

  }

  .content {
    border-radius: 5%;
    background-color: #ffffff;
  }

  .content view {
    margin: 10px;
    padding-top: 2px;
  }

  .price {
    font-size: 18px;
    font-weight: bold;
  }
</style>